<template>
  <div class="loading" :style="{'background-color': loadBg}">
    <img :src="'./static/svg-loaders/'+ loadName +'.svg'" alt="">
    <p class="desc">{{title}}</p>
  </div>
</template>
<style scoped lang="scss" rel="stylesheet/scss">
  @import "./loading.scss";
</style>
<script type="text/ecmascript-6">
  const allowType = ['audio', 'audio',
    'ball-triangle',
    'bars',
    'circles',
    'grid',
    'hearts',
    'oval',
    'puff',
    'rings',
    'spinning-circles',
    'tail-spin',
    'three-dots',
    'tail-spin',
    'three-dots']
  export default {
    props: {
      title: {
        type: String,
        default: '正在载入...'
      },
      loadName: {
        type: String,
        default: 'bars',
        validator(value) {
          return allowType.indexOf(value) > -1
        }
      },
      loadBg: {
        type: String,
        default: 'rgba(0,0,0,.5)'
      }
    }
  }
</script>
